<!-- 登录功能组件 -->

<!-- html区域 -->
<template>
  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 登录内容 -->
    <div class="login-div">
      <!-- 登录头像 -->
      <div class="login-img-div">
        <img class="login-img" src="../assets/hredu.jpg" alt="" />
      </div>
      <!-- 登录组件 -->
      <el-form
      :model="loginForm"
      :rules="loginFormRules"
      ref="loginRuleForm"
      label-width="70px"
      class="login_form" >
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button @click="onReset" >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- js区域 -->
<script>
export default {
  data () {
    return {
      // 登录表单对象
      loginForm: {
        client_id: 'ricervcvcer_client',
        client_secret: 'ricervcvcer_secret',
        grant_type: 'password',
        username: '',
        password: ''
      },
      // 表单验证规则
      loginFormRules: {
        // 用户名的验证规则
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 15, message: '用户名长度在4-15之间', trigger: 'blur' }
        ],
        // 密码的验证规则
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '密码长度在3-15之间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      // elementUI的表单自带有验证方法validate()
      // await可以等待ajax操作返回结果，并且接收，但是必须将所在的函数设置为异步的（async）
      this.$refs.loginRuleForm.validate(async valid => {
        if (!valid) {
          return
        }
        sessionStorage.clear('RICERVCVCER-TOKEN')
        // 发送ajax请求，到服务器完成登录
        // http://127.0.0 .1/login
        // 后端security默认接收参数的格式为x-www-form，但是前端axios默认提交数据使用application/json格式
        const { data: result, status: state } = await this.$http.post('user-server/oauth/token', this.$qs.stringify(this.loginForm))
        // console.log(result.access_token)
        if (state !== 200) {
          this.$message.error('登录失败')
        } else {
          this.$message.success('登录成功')
          // 将一个键值对写入到sessionStorage中，表示当前已经登录了
          sessionStorage.setItem('RICERVCVCER-TOKEN', 'Bearer ' + result.access_token)
          // 跳转：
          // 多页面模式的项目：location.href = '新地址'
          // 单页面应用程序：修改路由的hash方式进行跳转
          this.$router.push('/home')
        }
      })
    },
    onReset () {
      // 只要组件编写了ref属性，那么这个对象会进入vue的$refs属性中
      // elementUI的表单自带有重置方法resetFields()
      this.$refs.loginRuleForm.resetFields()
    }
  }
}
</script>

<!-- css区域 -->
<!--
 less: 简化版的css语言，优点：简单， 缺点：浏览器无法识别
    webpack
 css:  优点： 浏览器识别， 缺点： 代码繁杂

 scoped: 作用域，设置了scope，样式只有本组件内可以使用
 本组件使用的样式，编写在style中就可以，全局需要使用样式，建议额外单独编写一个.css后缀的样式文件
 -->
<style lang="less" scoped>
.login-container {
  background-color: #a2c0be;
  height: 100%;
  .login-div {
    width: 480px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    .login-img-div {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #eee;
      box-shadow: 0 0 10px #add;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      .login-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>
